<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/layui.css">
    <script src="layui.js"></script>
</head>
<body>
    <div id="test1"></div>
    <button id="btn" type="button" class="layui-btn">一个标准的按钮</button>
  <script>
  layui.use('tree', function(){
    var tree = layui.tree;
    var $=layui.$;
    $.post(
     "http://stuapi.ysdjypt.com/api/GetModulesByRoleIdLayUI"
     ,{
        roleId:"37da0768-4100-4ff3-b9d7-0cc58aae2a7c",
        token:"99edc960-8dba-43cf-8af8-81c408a2cb6b"
     },function(res){
    //渲染
    var inst1 = tree.render({
      elem: '#test1'  //绑定元素
      ,showCheckbox:true //开启复选框
      ,edit: ['add', 'update', 'del'] //开启节点编辑图标
      ,id: 'demoId' //定义索引
      ,data:res
      ,click: function(obj){//点击节点的回调
  /*   console.log(obj.data); //得到当前点击的节点数据
    console.log(obj.state); //得到当前节点的展开状态：open、close、normal
    console.log(obj.elem); //得到当前节点元素
    
    console.log(obj.data.children); //当前节点下是否有子节点 */
  }
  ,oncheck: function(obj){//点击复选框的回调
   /*  console.log(obj.data); //得到当前点击的节点数据
    console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
    console.log(obj.elem); //得到当前节点元素 */
  }
  ,operate: function(obj){
    var type = obj.type; //得到操作类型：add、edit、del
    var data = obj.data; //得到当前节点的数据
    var elem = obj.elem; //得到当前节点元素
    
    //Ajax 操作
    var id = data.id; //得到节点索引
    if(type === 'add'){ //增加节点
      //返回 key 值
      console.log("添加");
      return 123;
    } else if(type === 'update'){ //修改节点
        console.log("修改");
      console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
    } else if(type === 'del'){ //删除节点
        console.log("删除");
    };
  }
    });
},'json'
    );
    $("#btn").on('click',function(){
     //获得选中的节点
     var checkData = tree.getChecked('demoId');
     console.log(checkData);
    });
  });
  </script>
</body>
</html>